<template>
  <div class="trace-detail">
    <!-- 头部商品信息 -->
  <div class="flex flex-wrap gap-4">
    <el-card style="width: 100%" shadow="always">
      <div class="header">
        <img class="product-img" :src="productInfo.coverImageUrl" alt="商品图片" />
        <div class="header-main">
          <div class="header-title">{{ productInfo.goodsName }}</div>
          <div class="header-info-row">
            <div class="header-info-col">
              <div>生产批次：{{ productInfo.batch }}</div>
              <div>生产许可证号：{{ productInfo.licenseNumber }}</div>
            </div>
            <div class="header-info-col">
              <div>保质期：{{ productInfo.shelfLife }}</div>
              <div>生产企业：{{ productInfo.manufacturers }}</div>
            </div>
          </div>
          <div class="header-report">
            <div class="report-title">产品检验报告</div>
            <div class="report-list">
                <el-upload
                  v-model:file-list="data"
                  action="http://10.223.8.24:8023/api/FileUpload/UploadFile"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoves"
                  :on-success="(response: any, file: any, fileList: any) => handleAvatarSuccess(response, file, fileList, '基础信息', '产品检验报告', feedData.batch)"
                  multiple
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                  <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>

            </div>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="info">修改基本信息</el-button>
          <el-button type="info" style="margin-left: 12px;">导出溯源码</el-button>
        </div>
      </div>
    </el-card>
  </div>
    
  
    <!-- 主体详情部分 -->
    <div style="margin-top: 50px;">
    <el-card style="width: 100%" shadow="always">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!-- 养殖信息 -->
          <el-tab-pane  label="养殖信息(0/5)" name="first">
            <!-- 养殖信息 -->
            <div class="feed-info-grid-wrapper">
              <h3 class="feed-info-title">养殖信息<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="feedOpen()">设置</el-button></span></h3>
              <el-divider class="card-divider" />
              <div class="feed-info-grid">
                <div class="feed-info-item">
                  <span class="feed-info-label">品种：</span><span class="feed-info-value">{{feedData.variety}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">来源：</span><span class="feed-info-value">{{feedData.source}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">饲养天数：</span><span class="feed-info-value">{{ feedData.breedingDays }} 天</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">饲料品牌：</span><span class="feed-info-value">{{feedData.feedBrand}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">饲养负责人：</span><span class="feed-info-value">{{ feedData.supervisor }}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">出栏日期：</span><span class="feed-info-value"><span v-if="feedData.shipment!=null">{{moment(feedData.shipment).format("YYYY 年MM月DD日")}}</span></span>
                </div>
              </div>
            </div>
            <!-- 免疫信息 -->

            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">免疫信息<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="addrow()">新增行</el-button></span></h3>
              <el-divider class="card-divider" />
              <el-table :data="tableData" style="width: 100%"   :header-cell-style="{ background: '#e7ebec', color: '#222323',  fontSize: '16px',
                  fontWeight: 'bold',
                  fontFamily: '宋体, sans-serif' }">
                <el-table-column prop="breedingDays" label="饲养天数" width="180" >
                  <template v-slot="scoped">
                    <el-input v-if="scoped.row.isEadit==true" v-model="scoped.row.breedingDays"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="healthStyle" label="保健方式" width="180" >
                  <template v-slot="scoped">
                    <el-input v-if="scoped.row.isEadit==true" v-model="scoped.row.healthStyle"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="healthMethod" label="保健方法" width="180" >
                  <template v-slot="scoped">
                    <el-input v-if="scoped.row.isEadit==true" v-model="scoped.row.healthMethod"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="操作"  width="180" >
                  <template v-slot="scoped">
                    <el-button link type="primary" v-if="scoped.row.isEadit==true" @click="save(scoped.row,'')">保存</el-button>
                    <el-button link type="primary" v-if="scoped.row.isEadit==true" @click="removeRow(scoped.$index)">取消</el-button>
                    <el-button link type="primary"  v-if="scoped.row.isEadit==false" @click="changeStatue(scoped.row)">修改</el-button>
                    <el-button link type="primary"  v-if="scoped.row.isEadit==false" @click="save(scoped.row,'删除')">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 动检证 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">动检证</h3>
              <el-divider class="card-divider" />
              <el-upload
                v-model:file-list="animalHealth"
                action="http://10.223.8.24:8023/api/FileUpload/UploadFile"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemoves"
                :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '养殖信息', '动检证', feedData.batch)"
                multiple
                >
                <el-icon><Plus /></el-icon>
                </el-upload>
            </div>
             <!-- 企业信息 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">企业信息<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="openCompany()">设置</el-button></span></h3>
              <el-divider border-style="double" class="card-divider" />
              <div class="feed-info-grid">
                <div class="feed-info-item">
                  <span class="feed-info-label">养殖场：</span><span class="feed-info-value">{{companyData.companyName}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">负责人：</span><span class="feed-info-value">{{companyData.responsible}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">存栏数量：</span><span class="feed-info-value">{{ companyData.herdsNum }} (只)</span>
                </div>
              </div>
            </div>
            <!-- 企业照片 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">企业照片</h3>
              <el-divider border-style="double" class="card-divider" />
              <el-upload
                v-model:file-list="BreedingFirmData"
                :action="upload_Url"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemoves"
                :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '养殖信息', '养殖企业', feedData.batch)"
                multiple
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible"  align-center>
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </div>
          </el-tab-pane>
          <!-- 屠宰信息 -->
          <el-tab-pane label="屠宰信息(0/5)" name="second">
            <!-- 屠宰信息 -->
            <div class="feed-info-grid-wrapper">
              <h3 class="feed-info-title">屠宰信息<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="openSlaughter()">设置</el-button></span></h3>
              <el-divider class="card-divider" />
              <div class="feed-info-grid">
                <div class="feed-info-item">
                  <span class="feed-info-label">批次：</span><span class="feed-info-value">{{slaughterData.batch}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">到场均重：</span><span class="feed-info-value">{{slaughterData.averageWeight}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">到场时间：</span><span v-if="slaughterData.arrivalTime!=null">{{moment(slaughterData.arrivalTime).format("YYYY 年MM月DD日 HH:mm:ss")}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">屠宰时间：</span><span v-if="slaughterData.slaughterTime!=null">{{moment(slaughterData.slaughterTime).format("YYYY 年MM月DD日 HH:mm:ss")}}</span>
                </div>
              </div>
            </div>
            <!-- 相关资质 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">相关资质</h3>
              <el-divider class="card-divider" />
              <el-upload
                v-model:file-list="aptitudePhotos"
                action="http://10.223.8.24:8023/api/FileUpload/UploadFile"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemoves"
                :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '屠宰信息', '资质照', feedData.batch)"
                multiple
                >
                <el-icon><Plus /></el-icon>
                </el-upload>
            </div>
             <!-- 企业信息 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">企业信息<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="opensslaughterFirm()">设置</el-button></span></h3>
              <el-divider border-style="double" class="card-divider" />
              <div class="feed-info-grid">
                <div class="feed-info-item">
                  <span class="feed-info-label">公司名称：</span><span class="feed-info-value">{{slaughterFirmData.companyName}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">成立时间：</span><span class="feed-info-value" v-if="slaughterFirmData.establishedTime!=''">{{moment(slaughterFirmData.establishedTime).format("YYYY 年MM月DD日")}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">公司地址：</span><span class="feed-info-value">{{slaughterFirmData.address}} {{slaughterFirmData.detailAddress}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">公司简介：</span><span class="feed-info-value">{{ slaughterFirmData.companyProfile }} </span>
                </div>
              </div>
            </div>
             <!-- 企业照片 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">企业照片</h3>
              <el-divider border-style="double" class="card-divider" />
              <el-upload
                v-model:file-list="foodFirmData"
                :action="upload_Url"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemoves"
                :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '屠宰信息', '食品加工企业', feedData.batch)"
                multiple
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible"  align-center>
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </div>
          </el-tab-pane>
          <!-- 深加工信息 -->
          <el-tab-pane label="深加工信息(0/5)" name="third">
             <!-- 深加工信息 -->
            <div class="feed-info-grid-wrapper">
              <h3 class="feed-info-title">深加工信息<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="deepOpens()">设置</el-button></span></h3>
              <el-divider class="card-divider" />
              <div class="feed-info-grid">
                <div class="feed-info-item">
                  <span class="feed-info-label">班组：</span><span class="feed-info-value">{{deepData.productionCrews}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">负责人：</span><span class="feed-info-value">{{deepData.responsible}}</span>
                </div>
              </div>
            </div>
             <!-- 食品安全信息 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">食品安全信息</h3>
              <el-divider class="card-divider" />
              <el-upload
                v-model:file-list="foodSaveData"
                action="http://10.223.8.24:8023/api/FileUpload/UploadFile"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemoves"
                :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '深加工信息', '食品安全', feedData.batch)"
                multiple
                >
                <el-icon><Plus /></el-icon>
                </el-upload>
            </div>
             <!-- 供应商材料信息 -->
            <div class="feed-info-grid-wrapper">
              <h3 class="feed-info-title">供应商信息</h3>
              <el-divider class="card-divider" />
              <h5 class="feed-info-title1" style="margin-left: 20px;">原料<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="openVander('供应商信息-原料')">设置</el-button></span></h5>
              <div class="feed-info-grid-row" style="margin-left: 20px;">
                <div class="feed-info-item">
                  <span class="feed-info-label">生产批次：</span><span class="feed-info-value">{{vendorData1.supplierBatch}}</span>
                </div>
              </div>
              <h5 class="feed-info-title1" style="margin-left: 20px;">相关材料</h5>
              <el-divider class="card-divider" />
              <div>
                <el-upload
                  v-model:file-list="yuanPhotos"
                  action="http://10.223.8.24:8023/api/FileUpload/UploadFile"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoves"
                  :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '深加工信息', '原料', feedData.batch)"
                  multiple
                  >
                  <el-icon><Plus /></el-icon>
                  </el-upload>
              </div>

              <h5 class="feed-info-title1" style="margin-left: 20px;">辅料<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="openVander('供应商信息-辅料')">设置</el-button></span></h5>
              <div class="feed-info-grid-row" style="margin-left: 20px;">
                <div class="feed-info-item">
                  <span class="feed-info-label">生产批次：</span><span class="feed-info-value">{{vendorData2.supplierBatch}}</span>
                </div>
              </div>
              <h5 class="feed-info-title1" style="margin-left: 20px;">相关材料</h5>
              <el-divider class="card-divider" />
              <div>
                <el-upload
                  v-model:file-list="fuPhotos"
                  action="http://10.223.8.24:8023/api/FileUpload/UploadFile"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoves"
                  :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '深加工信息', '辅料', feedData.batch)"
                  multiple
                  >
                  <el-icon><Plus /></el-icon>
                  </el-upload>
              </div>

               <h5 class="feed-info-title1" style="margin-left: 20px;">添加剂<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="openVander('供应商信息-添加剂')">设置</el-button></span></h5>
              <div class="feed-info-grid-row" style="margin-left: 20px;">
                <div class="feed-info-item">
                  <span class="feed-info-label">生产批次：</span><span class="feed-info-value">{{vendorData3.supplierBatch}}</span>
                </div>
              </div>
              <h5 class="feed-info-title1" style="margin-left: 20px;">相关材料</h5>
              <el-divider class="card-divider" />
              <div>
                <el-upload
                  v-model:file-list="tianPhotos"
                  action="http://10.223.8.24:8023/api/FileUpload/UploadFile"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoves"
                  :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '深加工信息', '添加剂', feedData.batch)"
                  multiple
                  >
                  <el-icon><Plus /></el-icon>
                  </el-upload>
              </div>

               <h5 class="feed-info-title1" style="margin-left: 20px;">包材<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="openVander('供应商信息-包材')">设置</el-button></span></h5>
              <div class="feed-info-grid-row" style="margin-left: 20px;">
                <div class="feed-info-item">
                  <span class="feed-info-label">生产批次：</span><span class="feed-info-value">{{vendorData4.supplierBatch}}</span>
                </div>
              </div>
              <h5 class="feed-info-title1" style="margin-left: 20px;">相关材料</h5>
              <el-divider class="card-divider" />
              <div>
                <el-upload
                  v-model:file-list="baoPhotos"
                  action="http://10.223.8.24:8023/api/FileUpload/UploadFile"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoves"
                  :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '深加工信息', '包材', feedData.batch)"
                  multiple
                  >
                  <el-icon><Plus /></el-icon>
                  </el-upload>
              </div>
            </div>
              <!-- 深加工企业信息 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">企业信息<span><el-button class="feed-info-set-btn" color="#F2F3F5" @click="openDeepFirm()">设置</el-button></span></h3>
              <el-divider border-style="double" class="card-divider" />
              <div class="feed-info-grid">
                <div class="feed-info-item">
                  <span class="feed-info-label">公司名称：</span><span class="feed-info-value">{{deepCommany.companyName}}</span>
                </div>
                <div class="feed-info-item">
                  <span class="feed-info-label">生产许可证号：</span><span class="feed-info-value" >{{deepCommany.licenseNumber}}</span>
                </div>
              </div>
            </div>
             <!-- 企业照片 -->
            <div class="feed-info-grid-wrapper2">
              <h3 class="feed-info-title">企业照片</h3>
              <el-divider border-style="double" class="card-divider" />
              <el-upload
                v-model:file-list="deepFirmData"
                :action="upload_Url"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemoves"
                :on-success="(response: any, file: any, fileList: any) => handleUploadSuccess(response, file, fileList, '深加工信息', '食品加工企业', feedData.batch)"
                multiple
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible"  align-center>
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </div>
          </el-tab-pane>
        </el-tabs>
    </el-card>
    </div>

  </div>



<!-- 养殖信息对话框 -->
  <el-dialog v-model="feedLogic.opens" title="养殖信息" width="500" align-center draggable>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="feedData"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="品种" prop="variety">
        <el-input v-model="feedData.variety" />
      </el-form-item>
      <el-form-item label="来源" prop="source">
        <el-input v-model="feedData.source" />
      </el-form-item>
      <el-form-item label="饲养天数" prop="breedingDays">
        <el-input v-model="feedData.breedingDays" />
      </el-form-item>
      <el-form-item label="饲养品牌" prop="feedBrand">
        <el-input v-model="feedData.feedBrand" />
      </el-form-item>
      <el-form-item label="饲养负责人" prop="supervisor">
        <el-input v-model="feedData.supervisor" />
      </el-form-item>
      <el-form-item label="出栏日期" required>
        <el-col :span="11">
          <el-form-item prop="shipment">
            <el-date-picker
              v-model="feedData.shipment"
              type="date"
              placeholder="出栏日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 300px;" type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
   
  </el-dialog>
<!-- 养殖公司信息对话框 -->
  <el-dialog v-model="companyLogic.opens" title="企业信息" width="700" align-center draggable>
    <el-form
      ref="ruleFormRef"
      style="max-width: 700px"
      :model="companyData"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="养殖场" prop="companyName" >
        <el-input v-model="companyData.companyName" />
      </el-form-item>
      <el-form-item label="负责人" prop="responsible" >
        <el-input v-model="companyData.responsible" />
      </el-form-item>
      <el-form-item label="存栏数量" prop="herdsNum" >
        <el-input v-model="companyData.herdsNum" />
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 300px;" type="primary" @click="submitFormTwo(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

<!-- 屠宰信息对话框-->
  <el-dialog v-model="slaughterLogic.opens" title="屠宰信息" width="500" align-center draggable>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="slaughterData"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="批次" prop="batch" >
        <el-input v-model="slaughterData.batch" />
      </el-form-item>
      <el-form-item label="到场均重（公斤）" prop="averageWeight" required>
        <el-input v-model="slaughterData.averageWeight" />
      </el-form-item>
      <el-form-item label="到场时间" required>
        <el-col :span="24">
          <el-form-item prop="arrivalTime">
            <el-date-picker
              v-model="slaughterData.arrivalTime"
              type="datetime"
              placeholder="到场时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="屠宰时间" required>
        <el-col :span="24">
          <el-form-item prop="slaughterTime">
            <el-date-picker
              v-model="slaughterData.slaughterTime"
              type="datetime"
              placeholder="屠宰时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 300px;" type="primary" @click="slaughtersubmitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
   
  </el-dialog>
<!-- 屠宰公司信息对话框 -->
 <el-dialog v-model="slaughterFirm.opens" title="企业信息" width="700" align-center draggable>
    <el-form
      ref="ruleFormRef"
      style="max-width: 700px"
      :model="slaughterFirmData"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="公司名称" prop="companyName" >
        <el-input v-model="slaughterFirmData.companyName" />
      </el-form-item> 
      <el-row>
        <el-col :span="10">
          <el-form-item label="公司名称地址" prop=""  style="width: 280px;">
                  <el-cascader
                    v-model="slaughterFirmData.companyAddress2"
                    :options="options"
                    :props="props"
                  />
          </el-form-item> 
        </el-col>
        <el-col :span="14">
          <el-form-item  prop=""  style="margin-left: 15px;">
            <el-input v-model="slaughterFirmData.detailAddress" placeholder="详细地址、县、街道..."/>
          </el-form-item> 
        </el-col>
      </el-row>
      <el-form-item label="成立时间" required >
        <el-col :span="24">
          <el-form-item prop="" >
            <el-date-picker
              v-model="slaughterFirmData.establishedTime"
              type="date"
              placeholder="成立时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="公司简介" required>
        <el-col :span="24">
          <el-form-item prop="">
            <el-input
              v-model="slaughterFirmData.companyProfile"
              style="width: 600px;"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              placeholder="请输入公司简介"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 300px;" type="primary" @click="submitFormThree(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

<!-- 深加工信息对话框 -->
  <el-dialog v-model="deepLogic.opens" title="企业信息" width="700" align-center draggable>
    <el-form
      ref="ruleFormRef"
      style="max-width: 700px"
      :model="deepData"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="班组" prop="productionCrews" >
        <el-input v-model="deepData.productionCrews" />
      </el-form-item> 
      <el-form-item label="负责人" prop="responsible" >
        <el-input v-model="deepData.responsible" />
      </el-form-item> 
      <el-form-item>
        <el-button style="margin-left: 300px;" type="primary" @click="DeepProductSubmit(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 供应商材料对话框 -->
  <el-dialog v-model="vendorLogic.opens" :title="vendorLogic.titles" width="700" align-center draggable>
    <el-form
      ref="ruleFormRef"
      style="max-width: 700px"
      :model="vendorData"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="生产批次" prop="" v-if="vendorLogic.titles=='供应商信息-原料'">
        <el-input  v-model="vendorData1.supplierBatch" />
      </el-form-item> 
       <el-form-item label="生产批次" prop=""  v-if="vendorLogic.titles=='供应商信息-辅料'">
        <el-input v-model="vendorData2.supplierBatch" />
      </el-form-item> 
       <el-form-item label="生产批次" prop="" v-if="vendorLogic.titles=='供应商信息-添加剂'">
        <el-input  v-model="vendorData3.supplierBatch" />
      </el-form-item> 
       <el-form-item label="生产批次" prop="" v-if="vendorLogic.titles=='供应商信息-包材'">
        <el-input  v-model="vendorData4.supplierBatch" />
      </el-form-item> 
      <el-form-item>
        <el-button style="margin-left: 300px;" type="primary" @click="saveSupplier(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 深加工公司信息对话框 -->
  <el-dialog v-model="deepFirmLogic.opens" title="企业信息" width="700" align-center draggable>
    <el-form
      ref="ruleFormRef"
      style="max-width: 700px"
      :model="companyData"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="公司名称" prop="companyName" >
        <el-input v-model="deepCommany.companyName" />
      </el-form-item>
      <el-form-item label="许可证号" prop="licenseNumber" >
        <el-input v-model="deepCommany.licenseNumber" />
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 300px;" type="primary" @click="submitFormFour(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { trance, upload_Url } from '@/Helper/axiosSetting';
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { type UploadProps,type TabsPaneContext , type UploadUserFile , type FormInstance, type FormRules, ElMessage, ElMessageBox} from 'element-plus'
import moment from 'moment';
const route=useRoute();
onMounted(()=>{
  getDetail()
  
})

//#region //获取溯源基本信息详情
const productInfo = ref<any>({})
//获取唯一生产批次
const getDetail=()=>{
  trance.get("api/Tranc/GetTraceabilityBasic",{params:{ID:route.query.id}}).then(res=>{
    productInfo.value=res.data.data
    feedData.batch=res.data.data.batch
    slaughterData.batch=res.data.data.batch
    companyData.batch=res.data.data.batch
    slaughterFirmData.batch=res.data.data.batch
    deepData.batch=res.data.data.batch
    vendorData.batch=res.data.data.batch
    getData(res.data.data.batch)
    getTableData(res.data.data.batch)
    getCompanyData()
    getCompanyDataTwo()
    getCompanyDataThree()
    photoData.Batch=res.data.data.Batch
    getPhotos()
    getanimailPhotosList()
    getBreedingFirmPhotosList()
    getslaughterData()
    getFoodFirmPhotos()
    getaptitudePhotosList()
    getDeepProcess()
    getFoodSavephotos()
    yuan()
    GetyuanPhotos()
    GetfuPhotos()
    GettianPhotos()
    GetBaoPhotos()
    getDeepFirmPhotos()
  })
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const activeName = ref('first')

//标签
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(companyData)
}


//#region -------------------------------图片上传/删除通用----------------------------------

//上传照片实体
const photoData=reactive({
  InformationType:'',
  PhotoType:'',
  Batch:'',
  ImageUrl:'',
  isAddOrDel:false
})

//通用上传成功处理方法
const handleUploadSuccess = (response: any, file: any, fileList: any, informationType: string, photoType: string, batch: string) => {
  console.log('上传响应:', response)
  console.log('文件信息:', file)
  console.log('文件列表:', fileList)
  console.log('信息类型:', informationType)
  console.log('照片类型:', photoType)
  console.log('批次:', batch)
  
  photoData.ImageUrl = response
  photoData.InformationType = informationType
  photoData.PhotoType = photoType
  photoData.Batch = batch
  savePhotos()
}

//通用获取照片列表方法
const getPhotosList = (informationType: string, photoType: string, batch: string, targetRef: any) => {
  trance.get("api/Common/GetPhotosList", {
    params: {
      InformationType: informationType,
      PhotoType: photoType,
      Batch: batch
    }
  }).then(res => {
    targetRef.value = res.data.data
  })
}

//通用获取公司信息方法
const getCompanyDataCommon = (batch: string, companyType: number, targetData: any, callback?: () => void) => {
  trance.get("api/Common/GetCompanyData", {
    params: {
      Batch: batch,
      CompanyType: companyType
    }
  }).then(res => {
    Object.assign(targetData, res.data.data)
    if (callback) {
      callback()
    }
  })
}

//通用API调用方法
const apiGet = (url: string, params: any, targetData?: any, callback?: (data: any) => void) => {
  return trance.get(url, { params }).then(res => {
    if (targetData) {

      Object.assign(targetData, res.data.data)
    }
    if (callback) {
      callback(res.data.data)
    }
    return res.data.data
  })
}

//通用POST方法
const apiPost = (url: string, data: any, successCallback?: (res: any) => void, errorCallback?: (error: any) => void) => {
  return trance.post(url, data).then(res => {
    if (res.data.code === 200) {
      if (successCallback) {
        successCallback(res)
      }
    } else {
      if (errorCallback) {
        errorCallback(res)
      }
    }
    return res
  }).catch(error => {
    if (errorCallback) {
      errorCallback(error)
    }
    throw error
  })
}

//保存照片到数据库
const savePhotos=()=>{
  apiPost("api/Common/SavePhotos", photoData, (res) => {
    ElMessage.success(res.data.message)
  })
}

//删除照片
const handleRemoves: UploadProps['onRemove'] = (uploadFile:any) => {
  console.log(uploadFile.url)
   // 删除逻辑
   photoData.ImageUrl=uploadFile.url
   photoData.isAddOrDel=true
   savePhotos()
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  console.log(dialogImageUrl.value)
  dialogVisible.value = true
}

//#endregion

//#region---------------------- 基础信息产品检验报告图片照片-------------------------------
//产品检验报告图片上传成功的回调函数
const handleAvatarSuccess = (response: any, file: any, fileList: any, informationType: string, photoType: string, batch: string) => {
  handleUploadSuccess(response, file, fileList, informationType, photoType, batch)
}
//照片墙(产品检验报告) 
const data=ref<UploadUserFile[]>([])

//获取产品检验报告照片
const getPhotos = () => {
  getPhotosList("基础信息", "产品检验报告", feedData.batch, data)
}

//#endregion


//#region---------------------------------- 表单验证  全局
const ruleFormRef = ref<FormInstance>()
//表单验证
const rules = reactive<FormRules>({
  variety: [
    { required: true, message: '种类必填', trigger: 'blur' },
  ],
  source: [
    {required: true,message: '来源必填',trigger: 'change',},
  ],
  breedingDays: [
    {required: true,message: '饲养天数必填',trigger: 'change',},
  ],
  feedBrand: [
    {required: true,message: '饲养品牌必填',trigger: 'change',},
  ],
  supervisor: [
    {required: true,message: '负责人必填',trigger: 'change',},
  ],
  shipment: [
    {required: true,message: '出栏日期必选',trigger: 'change',},
  ],
   companyName: [
    {required: true,message: '公司名称必填',trigger: 'change',},
  ],
  responsible: [
    {required: true,message: '责任人必填',trigger: 'change',},
  ],
  herdsNum: [
    {required: true,message: '存栏只数必填',trigger: 'change',},
  ],
   averageWeight: [
    {required: true,message: '到场均重必填',trigger: 'change',},
  ],
  arrivalTime: [
    {required: true,message: '到厂时间必填',trigger: 'change',},
  ],
  slaughterTime: [
    {required: true,message: '屠宰时间必填',trigger: 'change',},
  ],
})
//#endregion

//#region //--------------------------------养殖信息-------------------------------------------
const feedLogic=reactive({
  opens:false
})
//获取养殖信息反填
const getData=(a:any)=>{
  apiGet("api/Tranc/GetAquaculture", {Batch: a}, feedData)
}

//养殖信息实体
const feedData=reactive({
  "iD":0,
  "variety": "",
  "source": "",
  "breedingDays": '',
  "feedBrand": "",
  "supervisor": "",
  "shipment": null,
  "batch": ''
})
//打开养殖信息对话框
const feedOpen=()=>{
  feedLogic.opens=true
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')

      trance.post("api/Tranc/AddAquaculture",feedData).then(res=>{
        if(res.data.code==200){
          ElMessage.success("设置成功");
          feedLogic.opens=false;
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//#endregion


//#region //--------------------------------免疫信息-------------------------------------------
//获取免疫信息列表
const tableData=ref([
  {
  "batch": "",
  "breedingDays": '',
  "healthStyle": "",
  "healthMethod": "",
   "isEadit": false
  }
])
const getTableData=(a:any)=>{
  apiGet("api/Tranc/GetHealthList", {batch: a}, null, (data) => {
    tableData.value = data
    console.log(tableData.value)
  })
}

//免疫信息实体


//新增一行
const addrow=()=>{
  tableData.value.push({
    "batch": "",
  "breedingDays": '',
  "healthStyle": "",
  "healthMethod": "",
   "isEadit": true
  })
}
//删除一行（取消按钮）
const removeRow=(index:any)=>{
  tableData.value.splice(index,1)
}
//修改改变表格状态
const changeStatue=(a:any)=>{
  a.isEadit=true

}

//保存+修改+删除
const save=(row:any,title:string)=>{

  const healthData={//保存
    id:0,
    batch:feedData.batch,
    breedingDays:row.breedingDays,
    healthStyle:row.healthStyle,
    healthMethod:row.healthMethod,
    isAddOrUpdateOrDel:1
  }

  if(row.id!=null){//修改
    healthData.id=row.id
    healthData.isAddOrUpdateOrDel=2
  }

  if(title!=''){//删除
    healthData.isAddOrUpdateOrDel=3
    ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      trance.post("api/Tranc/AddHealth",healthData).then(res=>{
        if(res.data.code==200){
          ElMessage.success(res.data.message);
          row.isEadit=false
          getTableData(feedData.batch)
        }else{
          ElMessage.error("删除失败")
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
    return
    }

  trance.post("api/Tranc/AddHealth",healthData).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.message);
      row.isEadit=false
      getTableData(feedData.batch)
    }else{
      ElMessage.error("保存失败")
    }
  })

    
}
//#endregion


//#region //--------------------------------养殖信息照片-------------------------------------------


//动检证实体
const animalHealth=ref([])

//获取动检证照片
const getanimailPhotosList = () => {
  getPhotosList("养殖信息", "动检证", feedData.batch, animalHealth)
}




//#endregion


//#region -----------------------------------养殖企业信息------------------------------------------
//公司信息实体
const companyData=reactive({
  "companyType": 0,
  "companyName": "",
  "licenseNumber": "",
  "companyAddress": '',
  "companyAddress2": [],
  "detailAddress": "",
  "establishedTime": null,
  "companyProfile": "",
  "responsible": "",
  "herdsNum": '',
  "batch": ""
})

const companyLogic=reactive({
  opens:false
})
//获取公司信息 
const getCompanyData=()=>{
  getCompanyDataCommon(feedData.batch, 1, companyData)
}


//打开公司信息对话框
const openCompany=()=>{
  companyLogic.opens=true
  companyData.companyType=1

}
//保存企业信息
const submitFormTwo = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')

      trance.post("api/Common/AddCompany",companyData).then(res=>{
        if(res.data.code==200){
          ElMessage.success("设置成功");
          companyLogic.opens=false;
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}




//养殖企业照片实体
const BreedingFirmData=ref([])

//获取养殖企业照片
const getBreedingFirmPhotosList = () => {
  getPhotosList("养殖信息", "养殖企业", feedData.batch, BreedingFirmData)
}




//#endregion


//#region -----------------------------------屠宰信息-----------------------------------------------
//屠宰信息实体
const slaughterData=reactive({
  "id": 0,
  "averageWeight": '',
  "arrivalTime": null,
  "slaughterTime": null,
  "batch": "",
})
//屠宰信息的反填
const getslaughterData=()=>{
  apiGet("api/Tranc/GetSlaughterData", {Batch: slaughterData.batch}, slaughterData)
}
//屠宰信息对话框中间实体
const slaughterLogic=reactive({
  opens:false
})
//打开屠宰信息对话框
const openSlaughter=()=>{
  slaughterLogic.opens=true
}

//编辑屠宰信息（添加/修改）
const slaughtersubmitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      if(moment(slaughterData.slaughterTime).isBefore(slaughterData.arrivalTime)){
        ElMessage.info("屠宰时间必须在到场时间之后，请重新选择屠宰时间")
        return
      }
      trance.post("api/Tranc/EaditSlaughter",slaughterData).then(res=>{
        if(res.data.code==200){
          ElMessage.success("设置成功");
          slaughterLogic.opens=false;
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}




//#endregion

//#region -----------------------------------屠宰信息照片-------------------------------------------

//资质照片实体
const aptitudePhotos=ref([])


//获取资质照片
const getaptitudePhotosList = () => {
  getPhotosList("屠宰信息", "资质照", feedData.batch, aptitudePhotos)
}


//#endregion

//#region ----------------------------------屠宰企业信息------------------------------------------
//级联选择省市
const props = {
  expandTrigger: 'hover' as const,
}
const options=ref([])
const getAddress=()=>{
  apiGet("api/Common/GetAddress", {}, null, (data) => {
    options.value = data
  })
}
//屠宰企业实体
const slaughterFirmData=reactive({
  "companyType": 0,
  "companyName": "",
  "licenseNumber": "",
  "companyAddress": '',
  "companyAddress2":[] as number [] ,
  "detailAddress": "",
  "establishedTime": '',
  "companyProfile": "",
  "responsible": "",
  "herdsNum": null,
  "batch": "",
   "address":''
})

//屠宰企业中间实体
const slaughterFirm=reactive({
  opens:false
})

const opensslaughterFirm=()=>{
  slaughterFirm.opens=true
  getAddress()
}
//保存企业信息
const submitFormThree = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(slaughterFirmData)
     slaughterFirmData.companyType=2
      slaughterFirmData.companyAddress=slaughterFirmData.companyAddress2.toString()
      trance.post("api/Common/AddCompany",slaughterFirmData).then(res=>{
        if(res.data.code==200){
          ElMessage.success("设置成功");
          companyLogic.opens=false;
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//获取公司信息 
const getCompanyDataTwo=()=>{
  getCompanyDataCommon(feedData.batch, 2, slaughterFirmData, () => {
    slaughterFirmData.companyAddress2 = slaughterFirmData.companyAddress.split(',').flatMap(Number)
  })
}


//食品有限公司照片
const foodFirmData=ref([])


//获取食品公司的照片
const getFoodFirmPhotos = () => {
  getPhotosList("屠宰信息", "食品加工企业", feedData.batch, foodFirmData)
}


//#endregion

//#region -----------------------------------深加工信息---------------------------------------------
//深加工信息实体
const deepData=reactive({
  "id": 0,
  "productionCrews": "",
  "responsible": "",
  "batch": 0
})

//深加工信息对话框中间实体
const deepLogic=reactive({
  opens:false
})
//打开深加工信息对话框
const deepOpens=()=>{
  deepLogic.opens=true
}

//深加工信息编辑
const DeepProductSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      trance.post("api/Tranc/EaditDeepProcess",deepData).then(res=>{
        if(res.data.code==200){
          ElMessage.success("设置成功");
          companyLogic.opens=false;
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//获取深加工信息
const getDeepProcess=()=>{
  apiGet("api/Tranc/GetProcess", {Batch: deepData.batch}, deepData)
}


//动检证实体
const foodSaveData=ref([])

//获取食品安全照片
const getFoodSavephotos = () => {
  getPhotosList("深加工信息", "食品安全", feedData.batch, foodSaveData)
}
//#endregion

//#region -----------------------------------供应商信息实体-----------------------------------------
//材料实体
const vendorData=reactive({
  "id": 0,
  "batch": '',
  "title": '',
  "supplierBatch": "",
})
//原料实体
const vendorData1=reactive({
  "id": 0,
  "batch": '',
  "title": '',
  "supplierBatch": "",
})

//辅料
const vendorData2=reactive({
  "id": 0,
  "batch": '',
  "title": '',
  "supplierBatch": "",
})
//添加剂
const vendorData3=reactive({
  "id": 0,
  "batch": '',
  "title": '',
  "supplierBatch": "",
})
//包材
const vendorData4=reactive({
  "id": 0,
  "batch": '',
  "title": '',
  "supplierBatch": "",
})


//供应商中间实体
const vendorLogic=reactive({
  opens:false,
  titles:'',
  fuBatch:'',
  tianBatch:'',
  baoBatch:''
})
//打开供应商-原料中间实体
const openVander=(titles:string)=>{
  vendorLogic.opens=true
  vendorLogic.titles=titles
  
  if(titles=="供应商信息-原料"){
    vendorData1.title=titles
    vendorData1.batch=feedData.batch
  }
  if(titles=="供应商信息-辅料"){
    vendorData2.title=titles
    vendorData2.batch=feedData.batch
  }
  if(titles=="供应商信息-添加剂"){
    vendorData3.title=titles
    vendorData3.batch=feedData.batch
  }
  if(titles=="供应商信息-包材"){
    vendorData4.title=titles
    vendorData4.batch=feedData.batch
  }
}


//设置供应商信息
const saveSupplier = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if(vendorLogic.titles=="供应商信息-辅料"){
        Object.assign(vendorData,vendorData1)
      }
      if(vendorLogic.titles=="供应商信息-辅料"){
        Object.assign(vendorData,vendorData2)
      }
      if(vendorLogic.titles=="供应商信息-添加剂"){
        Object.assign(vendorData,vendorData3)
      }
      if(vendorLogic.titles=="供应商信息-包材"){
        Object.assign(vendorData,vendorData4)
      }

      trance.post("api/Tranc/EditSupplier",vendorData).then(res=>{
        if(res.data.code==200){
          ElMessage.success("设置成功");
          companyLogic.opens=false;
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//获取供应商信息
const getVendorList=(title:any)=>{
  if(title=='原料'){
    apiGet("api/Tranc/GetVendor", {Batch:vendorData.batch,Title:title}, 
    vendorData1
   )
  }
  if(title=='辅料'){
    apiGet("api/Tranc/GetVendor", {Batch:vendorData.batch,Title:title}, 
    vendorData2
   )
  }
  if(title=='添加剂'){
    apiGet("api/Tranc/GetVendor", {Batch:vendorData.batch,Title:title}, 
    vendorData3
   )
  }
  if(title=='包材'){
    apiGet("api/Tranc/GetVendor", {Batch:vendorData.batch,Title:title}, 
    vendorData4
   )
  }
   
  // apiGet("api/Tranc/GetVendor",{params:{
  //   Batch:vendorData.batch,
  //   Title:title
  // }}).then(res=>{
  //   Object.assign(vendorData,res.data.data)
  // })
}

//原材料供应商
const yuan=()=>{
  getVendorList('原料')
  getVendorList('辅料')
  getVendorList('添加剂')
  getVendorList('包材')
}


//原料照片
const yuanPhotos=ref([])
//原料照片
const GetyuanPhotos = () => {
  getPhotosList("深加工信息", "原料", feedData.batch, yuanPhotos)
}
//辅料照片
const fuPhotos=ref([])
//辅料照片
const GetfuPhotos = () => {
  getPhotosList("深加工信息", "辅料", feedData.batch, fuPhotos)
}
//添加剂照片
const tianPhotos=ref([])
//辅料照片
const GettianPhotos = () => {
  getPhotosList("深加工信息", "添加剂", feedData.batch, tianPhotos)
}
//包材照片
const baoPhotos=ref([])
//包材照片
const GetBaoPhotos = () => {
  getPhotosList("深加工信息", "包材", feedData.batch, baoPhotos)
}
//#endregion

//#region -----------------------------------深加工企业------------------------------------------
const deepCommany=reactive({
  "companyType": 0,
  "companyName": "",
  "licenseNumber": "",
  "companyAddress": '',
  "detailAddress": "",
  "establishedTime": null,
  "companyProfile": "",
  "responsible": "",
  "herdsNum": null,
  "batch": "",
   "address":''
})

const deepFirmLogic=reactive({
  opens:false
})

const openDeepFirm=()=>{
  deepFirmLogic.opens=true
  
}
//保存企业信息
const submitFormFour = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(deepCommany)
     deepCommany.companyType=3
     deepCommany.batch=feedData.batch
      trance.post("api/Common/AddCompany",deepCommany).then(res=>{
        if(res.data.code==200){
          ElMessage.success("设置成功");
          deepFirmLogic.opens=false;
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//获取公司信息 
const getCompanyDataThree=()=>{
  getCompanyDataCommon(feedData.batch, 3, deepCommany)
}

const deepFirmData=ref([])

//获取食品公司的照片
const getDeepFirmPhotos = () => {
  getPhotosList("深加工信息", "食品加工企业", feedData.batch, deepFirmData)
}
//#endregion








</script>

<style scoped>
.trace-detail {
  background: #fff;
  border-radius: 12px;
  padding: 32px 32px 24px 32px;
  min-height: 800px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.card-divider {
  margin-left: -32px !important;
  margin-right: -32px !important;
  width: calc(100% + 64px) !important;
}

.header {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #eee;
  padding-bottom: 24px;
  margin-bottom: 24px;
  gap: 32px;
}
.product-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.header-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 32px;
  min-width: 600px;
}
.header-title {
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #222;
}
.flavor {
  font-size: 24px;
  color: #444;
}
.header-info-row {
  display: flex;
  gap: 80px;
  margin-bottom: 10px;
}
.header-info-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 20px;
  color: #333;
}
.header-report {
  margin-top: 18px;
}
.report-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 8px;
}
.report-list {
  display: flex;
  align-items: center;
  gap: 24px;
}
.report-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.header-actions {
  display: flex;
  flex-direction: row;      /* 横向排列 */
  justify-content: flex-end;/* 靠右对齐 */
  align-items: center;
  gap: 12px;                /* 按钮间距 */
  margin-left: auto;        /* 推到最右 */
  margin-top: 8px;
}


.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.feed-info-grid-wrapper {
  margin-left: 20px;
  max-width: 900px;
}

.feed-info-grid-wrapper2 {
  margin-left: 20px;
  margin-top: 60px;
    max-width: 900px;
}
.feed-info-title {
  color: #5595ee;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.feed-info-title1 {
  color: #0c0c0c;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.feed-info-set-btn {
  margin-left: 20px;
  width: 80px;
}
.feed-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 80px;
  margin-top: 20px;
}
.feed-info-item {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #333;
}
.feed-info-label {
  min-width: 110px;
  color: #444;
  font-weight: 500;
  margin-right: 0;
  /* 冒号后无间隔 */
  padding-right: 0;
}
.feed-info-value {
  color: #222;
  font-weight: 400;
  margin-left: 0;
  padding-left: 0;
}
.feed-info-grid-row {
  display: flex;
  align-items: center;
  gap: 60px;
  margin: 18px 0 18px 0;
}
</style> 

